<!--
 * @Descripttion: 编辑页面推广
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2022-02-21 18:44:31
-->
<template>
  <div class="lb-app-house-edit-banner">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="140px"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="subForm.title"
            placeholder="请输入标题"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="封面图" prop="cover">
          <lb-cover
            :fileList="subForm.cover"
            @selectedFiles="getBanner($event, 'cover')"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 210 * 280</lb-tool-tips>
        </el-form-item>
        <el-form-item label="长页面" prop="img">
          <lb-cover
            type="more"
            :fileList="subForm.img"
            :fileSize="50"
            @selectedFiles="selectedFiles($event, 'img')"
            @moveFiles="moveFiles($event, 'img')"
          ></lb-cover>
        </el-form-item>
        <el-form-item label="选择房源" prop="house_id">
          <el-tag style="cursor: pointer" @click="toShowDialog">{{
            subForm.house_title || '请选择房源'
          }}</el-tag>
        </el-form-item>
        <el-form-item label="授权弹窗" prop="auth">
          <el-checkbox-group @change="changeCheckBox" v-model="checkList">
            <div
              v-for="(item, index) in authList"
              :key="index"
              :style="{
                display: 'inline-block',
                marginLeft: index === 0 ? 0 : '15px'
              }"
            >
              <el-checkbox :label="item.title"></el-checkbox>
              <lb-tool-tips v-if="item.tips">{{ item.tips }}</lb-tool-tips>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="报名表单" prop="is_show">
          <el-radio-group v-model="subForm.is_show">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="subForm.phone"
            placeholder="请输入联系电话"
          ></el-input>
          <lb-tool-tips
            >联系电话用于客户咨询，请填写有效的联系电话
            <p class="mt-sm">手机格式：1[3-9]xxxxxxxxx</p>
            <p class="mt-sm">座机格式：0xx-xxxxxxx 或 0xx-xxxxxxxx</p>
            <p class="mt-sm">400电话格式：400-xxxxxxx</p>
          </lb-tool-tips>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="subForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('subForm')">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="$router.back(-1)">{{
            $t('action.back')
          }}</lb-button>
        </el-form-item>
      </el-form>

      <el-dialog
        title="选择房源"
        :visible.sync="showDialog"
        width="1000px"
        center
      >
        <el-form
          :inline="true"
          :model="searchForm"
          ref="searchForm"
          label-width="70px"
        >
          <el-form-item label="输入查询" prop="keyword">
            <el-input
              v-model="searchForm.keyword"
              placeholder="请输入房源名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <lb-button
              size="medium"
              type="primary"
              icon="el-icon-search"
              style="margin-right: 5px"
              @click="getTableDataList(1)"
              >{{ $t('action.search') }}</lb-button
            >
            <lb-button
              size="medium"
              icon="el-icon-refresh-left"
              style="margin-right: 5px"
              @click="resetForm('searchForm')"
              >{{ $t('action.reset') }}</lb-button
            >
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          ref="singleTable"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          tooltip-effect="dark"
          style="width: 100%"
          highlight-current-row
          @current-change="handleCurrentRow"
        >
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="title" label="房源名称"></el-table-column>
          <el-table-column prop="cover" label="房源图片">
            <template slot-scope="scope">
              <lb-image :src="scope.row.imgs[0]" />
            </template>
          </el-table-column>
        </el-table>
        <lb-page
          :batch="false"
          :page="searchForm.page"
          :pageSize="searchForm.limit"
          :total="total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        >
        </lb-page>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleDialogConfirm"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { reg } from '@/utils/reg'
export default {
  data () {
    return {
      navTitle: '',
      checkList: [],
      authList: [
        {
          title: '手机号',
          key: 'is_phone',
          tips: '用户进入页面需要弹出所选授权信息'
        }
      ],
      subForm: {
        id: 0,
        title: '',
        cover: [],
        img: [],
        house_id: '',
        house_title: '',
        phone: '',
        is_phone: 0,
        is_show: 1,
        top: 0
      },
      subFormRules: {
        title: {
          required: true,
          message: '请输入标题',
          type: 'string',
          trigger: 'change'
        },
        cover: {
          required: true,
          message: '请上传图片',
          type: 'array',
          trigger: 'change'
        },
        img: {
          required: true,
          message: '请上传图片',
          type: 'array',
          trigger: 'change'
        },
        house_id: {
          required: true,
          message: '请选择房源',
          type: 'number',
          trigger: 'blur'
        },
        phone: {
          required: true,
          validator: reg.validateAllPhone,
          text: '联系电话',
          trigger: 'blur'
        },
        is_show: {
          required: true,
          message: '请选择',
          type: 'number',
          trigger: 'blur'
        },
        top: {
          required: true,
          message: '请输入排序值',
          type: 'number',
          trigger: 'blur'
        }
      },
      showDialog: false,
      loading: false,
      total: 0,
      searchForm: {
        page: 1,
        limit: 10,
        keyword: '',
        status: 1
      },
      tableData: [],
      currentRow: {}
    }
  },
  created () {
    let {
      id
    } = this.$route.query
    if (id) {
      this.subForm.id = id
      this.getDetail()
    }
    this.navTitle = id ? `${this.$t('menu.HouseShareEdit')}` : `${this.$t('menu.HouseShareAdd')}`
  },
  methods: {
    async getDetail () {
      let { id } = this.subForm
      let { code, data } = await this.$api.houseLongPageInfo({
        id
      })
      if (code !== 200) return
      let checkItem = []
      this.authList.map(item => {
        if (data[item.key] === 1) {
          checkItem.push(item.title)
        }
      })
      this.checkList = checkItem
      data.cover = [{ url: data.cover }]
      data.img = data.img.map(item => {
        return { url: item }
      })
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
    },
    getBanner (e, key) {
      this.subForm[key] = e
    },
    selectedFiles (imgs, key) {
      this.subForm[key].push(...imgs)
    },
    moveFiles (imgs, key) {
      this.subForm[key] = imgs
    },
    /**
     * @method: 多选框
     * @param {*} e
     */
    changeCheckBox (e) {
      this.authList.map(item => {
        this.subForm[item.key] = e.includes(item.title) ? 1 : 0
      })
    },
    handleCurrentRow (e) {
      this.currentRow = e
    },
    handleDialogConfirm (e) {
      let { id = 0, title } = this.currentRow
      if (!id) {
        this.$message.error(`请选择房源`)
        return
      }
      this.subForm.house_id = id
      this.subForm.house_title = title
      this.showDialog = false
    },
    async toShowDialog () {
      await this.getTableDataList(1)
      this.showDialog = true
    },
    resetForm (name) {
      this.$refs[name].resetFields()
      this.getTableDataList(1)
    },
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getTableDataList()
    },
    getTableDataList (flag) {
      if (flag) this.searchForm.page = 1
      this.loading = true
      let { searchForm } = this
      this.$api.getHouseList(searchForm).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.tableData = res.data.data
          this.total = res.data.total
        }
      })
    },
    async submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.subForm))
          subForm.cover = subForm.cover[0].url
          subForm.img = subForm.img.map(item => {
            return item.url
          })
          delete subForm.house_title
          let methodModel = subForm.id ? 'houseLongPageUpdate' : 'houseLongPageAdd'
          this.$api[methodModel](subForm).then(res => {
            this.$message.success(this.$t('tips.successSub'))
            this.$router.back(-1)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-app-house-edit-banner {
  width: 100%;

  .page-main {
    width: 100%;

    .el-input,
    .el-input-number {
      width: 300px;
    }
  }
}
</style>
